import React, { ReactNode, useEffect } from 'react'
import style from './style.module.scss'
import $ from 'jquery'

interface IImmersiveNavbarProps {
    isImmersive?: boolean
    isBlur?: boolean
    blurRadius?: number
    children?: ReactNode
    menu?: ReactNode
}

export default function ImmersiveNavbar(props: IImmersiveNavbarProps) {
    useEffect(() => {
        document.body.style.setProperty('--navbar-content-height', $('#navbarContent').outerHeight()!.toString())
    })

    useEffect(() => {
        $(document).off('scroll')
        // set navbar immersive
        if (props.isImmersive) {
            // get immersive content height
            const navbarHeight = $('#navbarContent').outerHeight()
            // init begin scroll top
            let startScrollTop: number | undefined = 0
            $(document).on('scroll', () => {
                const endScrollTop = $(document).scrollTop()
                if (endScrollTop! > navbarHeight!) {
                    $(`.${style.navbar__immersive}`).addClass('immer')
                } else {
                    $(`.${style.navbar__immersive}`).removeClass('immer')
                }

                if (endScrollTop! < startScrollTop!) {
                    $(`.${style.navbar__immersive}`).removeClass('immer')
                }
                startScrollTop = $(document).scrollTop()
            })
        }
    }, [props.isImmersive])

    return (
        <nav id="navbar" className={`${style.navbar__immersive} ${props.isBlur ? 'blur' : ''}`}>
            <div id="navbarContent">{props.children}</div>
            {props.menu}
        </nav>
    )
}
